<template>
  <div>
    <!-- :clss用来判断消息类型，自己发的，别人发的，提示消息等 -->
    <li
      v-show="!isShowIframe"
      class="u-msg"
      :class="{
        'item-me': msg.flow==='out',
        'item-you': msg.flow==='in',
        'item-time': msg.type==='timeTag',
        'item-tip': msg.type==='tip',
        'session-chat': type==='session'
      }">
			<!-- 如果是时间标签类型 -->
      <div v-if="msg.type==='timeTag'" class="showTime">
        <div style="background:#e0e0e0;color:#333;display:inline-block;padding:3px 6px;border-radius:5px;">{{msg.showText}}</div>
      </div>
			<!-- 如果是聊天信息 -->
      <div v-else-if="msg.type==='tip'" class="tip">{{msg.showText}}</div>
			<!-- 如果是公共信息 -->
      <div v-else-if="msg.type==='notification' && msg.scene==='team'" class="notification">{{msg.showText}}</div>
      <div
        v-else-if="msg.flow==='in' || msg.flow==='out'"
        :idClient="msg.idClient"
        :time="msg.time"
        :flow="msg.flow"
        :type="msg.type"
        v-touch:hold="revocateMsg"
      >
        <!-- 以头像是否存在来判断显示聊天内容的格式 start -->
        <div class="msg-head" v-if="msg.avatar">
          <img class="icon" :src="msg.avatar">
        </div>
        <p class="msg-user" v-else-if="msg.type!=='notification'"><em>{{msg.showTime}}</em>{{msg.from}}</p>
        <!-- 以头像是否存在来判断显示聊天内容到格式 end -->
      <!-- 消息内容 start-->
        <span v-if="msg.type==='text'" class="msg-text" v-html="msg.showText" style="font-size:18px;line-height:26px;max-width:74%;"></span>
        <span v-else-if="msg.type==='custom'" class="msg-text" ref="mediaMsg"></span>
        <span v-else-if="msg.type==='custom-type1'" class="msg-text" ref="mediaMsg"></span>
        <span v-else-if="msg.type==='custom-type3'" class="msg-text" ref="mediaMsg"></span>
        <span v-else-if="msg.type==='image'" class="msg-text" ref="mediaMsg" @click.stop="showFullImg(msg.originLink)"></span>
        <span v-else-if="msg.type==='video'" class="msg-text" ref="mediaMsg"></span>
        <span v-else-if="msg.type==='audio'" class="msg-text" @click="playAudio(msg.audioSrc)">{{msg.showText}}</span>
        <span v-else-if="msg.type==='file'" class="msg-text"><a :href="msg.fileLink" target="_blank"><i class="u-icon icon-file"></i>{{msg.showText}}</a></span>
        <span v-else-if="msg.type==='robot'" class="msg-text" :class="{'msg-robot': msg.robotFlow!=='out' && !isRobot}">
          <div v-if="msg.robotFlow==='out'">{{msg.showText}}</div>
          <div v-else-if="msg.subType==='bot'">
            <!-- 多次下发的机器人消息 -->
            <div v-for="(tmsgs,index) in msg.message" :key = "index">
              <!-- 多个机器人模板 -->
              <div v-for="(tmsg,index) in tmsgs" :key = "index">
                <div v-if="tmsg.type==='text'">
                  <p>{{tmsg.text}}</p>
                </div>
                <div v-else-if="tmsg.type==='image'">
                  <p>
                    <img :src="tmsg.url">
                  </p>
                </div>
                <div v-else-if="tmsg.type==='url'">
                  <a :class="tmsg.style" :href="tmsg.target" target="_blank">
                    <div v-if="tmsg.image">
                      <p v-for="(tmsg2,index) in tmsg.image" :key = "index">
                        <img :src="tmsg2.url">
                      </p>
                    </div>
                    <div v-if="tmsg.text">
                      <p v-for="(tmsg2,index) in tmsg.text" :key = "index">{{tmsg2.text}}</p>
                    </div>
                  </a>
                </div>
                <div v-else-if="tmsg.type==='block'">
                  <a :class="tmsg.style" :params="tmsg.params" :target="tmsg.target" @click="sendRobotBlockMsg(tmsg, msg)">
                    <div v-if="tmsg.image">
                      <p v-for="(tmsg2,index) in tmsg.image"  :key = "index">
                        <img :src="tmsg2.url">
                      </p>
                    </div>
                    <div v-if="tmsg.text">
                      <p v-for="(tmsg2,index) in tmsg.text" :key = "index">{{tmsg2.text}}</p>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div v-else-if="msg.subType==='faq'">
            <!--p>{{msg.message.question}}</p-->
            <p>{{msg.message.answer}}</p>
          </div>
          <span v-if="msg.robotFlow!=='out' && !isRobot" class="msg-link">
            <a class="link-right" @click="continueRobotMsg(msg.content.robotAccid)">继续对话</a>
          </span>
        </span>
        <span v-else-if="msg.type==='notification'" class="msg-text notify">{{msg.showText}}</span>
        <span v-else class="msg-text" v-html="msg.showText"></span>
        <span v-if="msg.status==='fail'" class="msg-failed"><i class="weui-icon-warn"></i></span>
      <!-- 消息内容 end -->
      </div>
    </li>
  </div>
</template>

<style scoped lang="stylus">
	.item-you
		.msg-head, .msg-text
			float: left
		.msg-text
			background-color: #fff
			color: #333
			font-size:18px
			line-height:26px
			max-width:74%
			&::before
				right: 99%;
				border-right: 0.4rem solid #fff
			&::after
				background: none
	.item-me
		.msg-head, .msg-text
			float: right
		.msg-text
			color: #333
			background-color: #adcfff
			font-size:18px
			line-height:26px
			max-width:74%
			&::before
				background: none
			&::after
				left: 99%
				border-left: 0.4rem solid #adcfff
	.item-time
		font-size: 0.8rem
		text-align: center
		color: #ccc
	.item-tip
		font-size: 0.8rem
		text-align: center
		.tip
			margin: 0 auto
			width: 10rem
			padding: 0.1rem
			background-color: #e0e0e0
			border-radius: 0.4rem
	.notification
		font-size: 0.8rem
		text-align: center
		color: #ccc
	.notify
		color: #f50
		font-size: 0.8rem
	.msg-user
		font-style: italic
		color: #999
		em
			font-weight: normal
			margin-right: 1rem
	.msg-failed
		position: relative
		float: right
		margin-right: 0.2rem
		vertical-align: top
		font-size: 0.92rem
		line-height: 2.0rem
	.msg-head
		position: relative
		display: inline-block
		top: 0.1rem
		margin: 0
		margin-right: 0.6rem
		margin-left: 0.6rem
		padding: 0
		width: 2rem
		height: 2rem
		vertical-align: top
		img
			position: relative
			display: inline-block
</style>

